<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="#111111">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center"
          style="color: #fff; font-size: 36rpx"
        >
          {{ $t("mf.shop.buy_success") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="container">
      <image src="/static/mf/shop/success2.png" class="success_img" />
      <view class="title">{{ $t("mf.shop.buy_success") }}</view>
      <view class="buy_info">
        <view class="buy_info_list flex">
          <view class="flex1" style="text-align: left">{{
            $t("mf.success.pay_amount")
          }}</view>
          <view style="color: #fff">{{ price }}M</view>
        </view>
        <view class="buy_info_list flex">
          <view class="flex1" style="text-align: left">{{
            $t("mf.success.order_sn")
          }}</view>
          <view style="color: #fff">{{ order_sn }}</view>
        </view>
      </view>
      <view class="view_order btn" @tap.stop="goOrder">
        {{ $t("mf.success.view_order") }}
      </view>
      <view class="back_home btn" @tap.stop="goHome">
        {{ $t("mf.success.back_home") }}
      </view>
    </view>
  </cloudPage>
</template>

<script>
export default {
  data() {
    return {
      order_sn: null,
      price: null,
    };
  },
  onLoad(option) {
    this.order_sn = option.ordersn;
    this.price = option.price;
  },
  methods: {
    goOrder() {
      this.handleNavTo({
        url: "/pages/mf/my/functionPage/myOrder",
        type: "redirectTo",
      });
    },
    goHome() {
      this.handleNavTo({
        url: "/pages/mf/shop/index",
        type: "switchTab",
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 128rpx 20rpx 0;
  text-align: center;
}
.success_img {
  width: 298rpx;
  height: 296rpx;
  margin-bottom: 17rpx;
}
.title {
  height: 48rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 48rpx;
  margin-bottom: 70rpx;
}
.buy_info {
  width: 100%;
  height: 242rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  box-sizing: border-box;
  padding: 0rpx 36rpx;
  margin-bottom: 48rpx;
}
.buy_info_list {
  height: 120rpx;
  line-height: 120rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(21, 25, 53, 1);
}
.buy_info_list:last-child {
  border: none;
}
.btn {
  width: 630rpx;
  height: 98rpx;
  border-radius: 20rpx;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  line-height: 98rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.view_order {
  width: 516rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
  margin-bottom: 30rpx;
}
.back_home {
  width: 516rpx;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 8rpx;
  border: 2rpx solid rgba(254, 236, 191, 1);
  border-radius: 55rpx;
  font-size: 34rpx;
  color: rgba(254, 236, 191, 1);
}
</style>